<template>
    <div class="jingxuan">
        <!--        查询文章-->
        <span class="from">
            <el-form :inline="true" :model="context" class="demo-form-inline">
            <el-form-item label="文章名称:">
                <el-input v-model="context.name"></el-input>
            </el-form-item>
                <!--                //日期-->
                <!--<el-date-picker
                        v-model="value1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>-->
                <!--                //搜索日期-->
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
        </span>
        <!--        新增文章-->
        <div style="margin-bottom: 30px">
            <el-button type="text" @click="resetData" :style="{'background-color':'#409EFF',color:'#fff',textAlign:'center',width:'100px',padding:'10px 0'}">
                <span>新增文章</span>
            </el-button>
            <!--            新增文章-->
            <el-dialog :title="title" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="文章名称" :label-width="formLabelWidth">
                        <el-input v-model="form.articleName" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="文章简介" :label-width="formLabelWidth">
                        <el-input v-model="form.articleIntroduce" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="咨询师ID" :label-width="formLabelWidth">
                        <template>
                            <el-select autocomplete="off" v-model="value" placeholder="请选择">
                                <el-option
                                        v-for="item in teachers"
                                        :key="item.id"
                                        :label="item.name+'('+item.intro+')'"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </template>

                        <!--                        <el-input v-model="form.teacher_id" autocomplete="off"></el-input>-->
                    </el-form-item>

                    <el-form-item label="文章图片" :label-width="formLabelWidth">
                        <el-upload :on-success="uploadImg" name="file"
                                action="http://localhost:8080/article/upload"
                                list-type="picture-card"
                                :auto-upload="true">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                                <img
                                        class="el-upload-list__item-thumbnail"
                                        :src="file.url" alt=""
                                >
                                <span class="el-upload-list__item-actions">
        <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
                            </div>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible1">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>

                    </el-form-item>

                    <el-form-item label="文章详细内容" :label-width="formLabelWidth">
                        <el-input v-model="form.details" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="阅读量" :label-width="formLabelWidth">
                        <el-input v-model="form.readQuantity" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="收藏量" :label-width="formLabelWidth">
                        <el-input v-model="form.collects" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="类型" :label-width="formLabelWidth">
                        <template>
                            <el-select autocomplete="off" v-model="valueType" placeholder="请选择">
                                <el-option
                                        v-for="item in articleType"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </template>
                        <!--                        <el-input v-model="form.type_id" autocomplete="off"></el-input>-->
                    </el-form-item>

                </el-form>
                <!-------------------------------------------------------------------------------------------------->
                <div slot="footer" class="dialog-footer">
                    <el-button @click="quxiao">取 消</el-button>
                    <el-button type="primary" @click="saveDate">保 存</el-button>
                </div>
                <!--                ---------------------------------------------------------------------------------->
            </el-dialog>
        </div>

        <!--        文章列表展示-->
        <template>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%"
                    :header-cell-style="{'background-color':'#409EFF',color:'#fff',textAlign:'center'}"
                    :cell-style="{'text-align':'center'}">

                <el-table-column
                        prop="id"
                        label="ID">
                </el-table-column>
                <el-table-column
                        prop="articleName"
                        label="文章名称">
                </el-table-column>
                <el-table-column
                        prop="articleIntroduce"
                        label="文章简介">
                </el-table-column>
                <el-table-column
                        prop="teacherName"
                        label="咨询师">
                </el-table-column>
                <el-table-column
                        prop="tabularChart"
                        label="列表图url">
                    <template slot-scope="scope">
                        <img v-if="scope.row.tabularChart.substr(0,5) === 'https' " :src="scope.row.tabularChart" min-width="70" height="70"/>
                        <img v-else :src="'http://localhost:8080/article/down?filename=' + scope.row.tabularChart" min-width="70" height="70"/>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="details"
                        label="详细内容">
                </el-table-column>
                <el-table-column
                        prop="readQuantity"
                        label="阅读量">
                </el-table-column>
                <el-table-column
                        prop="collects"
                        label="收藏量">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="类型">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间">
                </el-table-column>

                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.$index)" type="text" size="small">编辑</el-button>
                        <el-button
                                @click.native.prevent="deleteRow(scope.$index)"
                                type="text"
                                size="small">
                            移除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <!--        删除操作-->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <span>此操作将永久删除该文件是否继续</span>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="deleteData">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "newTest",
        data(){
            return{
                //上传图片
                dialogImageUrl: '',
                dialogVisible1: false,
                disabled: false,


                //搜索所运用的属性
                value1: '',
                context: {
                    name: '',
                    region: ''
                },
                form:{
                    articleId:'',
                    articleName:'',
                    articleIntroduce:'',
                    teacher_id:'',
                    tabularChart:'',
                    details:'',
                    readQuantity:'',
                    collects:'',
                    type_id:'',
                    createTime:''
                },
                tableData: [],
                teachers:[],
                articleType:[],
                dialogFormVisible: false,
                dialogTableVisible: false,
                dialogTableVisible2:false,
                dialogVisible: false,
                formLabelWidth: '120px',
                title:'',
                state:'',
                value:'',
                valuec:'',
                valueType:'',
                valueTypec:''
            }
        },
        created() {
            this.refresh();
            this.getTeacher();
            this.getArticleType();
        },
        methods:{
            //图片上传
            handleRemove(file) {
                console.log(file);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible1 = true;
                console.log(file.url)
            },
            handleDownload(file) {
                console.log(file);
            },
            uploadImg(resp){
                console.log(resp)
                this.form.tabularChart = resp.data
            },
            quxiao(){
                this.dialogFormVisible = false
                console.log(this.value)
                console.log(this.valueType)
            },
            //获取时间
            getDateString(date){
                let yy = date.getFullYear();
                let mm = date.getMonth()+1;
                let dd = date.getDate();
                let hh = date.getHours();
                let mf = date.getMinutes()<10 ? '0'+date.getMinutes() : date.getMinutes();
                let ss = date.getSeconds()<10 ? '0'+date.getSeconds() : date.getSeconds();
                let str = yy + "-" + mm + "-" + dd +" " + hh + ":" + mf + ":" + ss;
                return str;
            },
            //查找文章
            onSubmit(){
                this.axios.get("/article/findLikeArticle",{
                    params:{
                        articleName:this.context.name
                    }
                }).then(res=>{
                    console.log(res)
                    this.tableData = res.data.data
                })
            },
            //获取所有文章列表
            refresh(){
                this.axios.get("/article/getArticleAndTeacher").then(res=>{
                    console.log(res);
                    this.tableData = res.data.data;
                })
            },
            //获取所有教师列表
            getTeacher(){
                this.axios.get("/teacherSearch/findAllTeacher").then(res=>{
                    console.log(res);
                    this.teachers = res.data.data
                })
            },
            //获取所有文章类型列表
            getArticleType(){
                this.axios.get("/articletype/getAllArticleType").then(res=>{
                    console.log(res)
                    this.articleType = res.data.data
                })
            },
            //新增数据刷新
            resetData(){
                this.title = '新增文章';
                this.state = 1;
                this.dialogFormVisible = true;
                this.form.articleName = '';
                this.form.articleIntroduce = '';
                this.form.teacher_id = '';
                this.form.tabularChart = '';
                this.form.details = '';
                this.form.readQuantity = '';
                this.form.collects = '';
                this.form.type_id = '';
                this.form.createTime = '';
            },
            //新增数据
            insertData(){
                this.axios.post("/article/insertArticle",{
                    articlename:this.form.articleName,
                    articleintroduce:this.form.articleIntroduce,
                    teacherId:this.value,
                    tabularchart:this.form.tabularChart,
                    details:this.form.details,
                    readquantity:this.form.readQuantity,
                    collects:this.form.collects,
                    typeId:this.valueType
                }).then(res=>{
                    console.log(res)
                })
            },
            //保存数据
            saveDate(){
                if (this.state === 1){
                    this.insertData();
                    setTimeout(()=>{this.refresh()},500);
                }
                if (this.state === 2){
                    this.updateDate();
                    setTimeout(()=>{this.refresh()},500);
                }
                this.dialogFormVisible = false;

            },
            //修改数据显示
            handleClick(index) {
                this.title = '编辑文章';
                this.state = 2;
                console.log(index);
                this.dialogFormVisible = true;
                console.log(this.tableData);
                this.form.articleId = this.tableData[index].id;
                this.form.articleName = this.tableData[index].articleName;
                this.form.articleIntroduce = this.tableData[index].articleIntroduce;
                // this.value = this.tableData[index].teacherName;
                this.form.tabularChart = this.tableData[index].tabularChart;
                this.form.details = this.tableData[index].details;
                this.form.readQuantity = this.tableData[index].readQuantity;
                this.form.collects = this.tableData[index].collects;
                // this.valueType = this.tableData[index].type;
                this.form.createTime = this.tableData[index].createTime;
            },
            //修改数据
            updateDate(){
                this.axios.post("/article/updateArticle",{
                    id:this.form.articleId,
                    articlename:this.form.articleName,
                    articleintroduce:this.form.articleIntroduce,
                    teacherId:this.value,
                    tabularchart:this.form.tabularChart,
                    details:this.form.details,
                    readquantity:this.form.readQuantity,
                    collects:this.form.collects,
                    typeId:this.valueType,
                }).then(res=>{
                    console.log(res)
                    setTimeout(()=>{this.refresh()},500);
                })
            },
            //删除数据
            deleteRow(index){
                this.dialogVisible = true;
                this.form.articleId = this.tableData[index].id;
                console.log(this.form.articleId);
            },
            deleteData(){
                this.dialogVisible = false;
                this.axios.delete("/article/deleteArticleById",{
                    params:{
                        id:this.form.articleId
                    }}
                ).then(res=>{
                    console.log(res)
                    setTimeout(()=>{this.refresh()},500)
                })
            }
        }
    }
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>